<template>
  <div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :top="defaultTop"
      center
      :show-close="false"
      :before-close="beforeClose"
    >
      <div class="dialog_constent">
        <slot name="dialog_content" />
      </div>

      <template v-if="isBtn" v-slot:footer>
        <el-button class="pan-btn tiffany-btn" icon="el-icon-edit" @click="dialogSave">保存</el-button>
        <slot name="dialog_btn" />
        <el-button class="pan-btn pink-btn" icon="el-icon-delete" @click="goBack">返回</el-button>
      </template>

    </el-dialog></div>
</template>
<script>
export default {
  name: 'MyEditDialog',
  components: {},
  props: {
    title: {
      type: String,
      default: 'MyEditDialog'
    },
    width: {
      type: String,
      default: '30%'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    defaultTop: {
      type: String,
      default: '12vh'
    },
    isBtn: {
      type: Boolean,
      default: true
    }

  },
  data() {
    return {
    }
  },
  computed: {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('onBeforeClose')
    },
    dialogSave() {
      this.$emit('onDialogSave')
    },
    goBack() {
      this.$emit('onGoBack')
    }
  }
}

</script>
<style lang='scss' scoped>
.dialog_constent{
  padding: 10px;
 box-sizing: border-box;
}
.dialog_footer{
   width: 100%;
   text-align: center;
}
</style>
